<script setup>
import { ref } from 'vue'
const { safeAreaInsets } = uni.getWindowInfo()

const tn = () => {
	
}

const bindPickerChange = () => {
	
}

const click = () => {}

const index = ref(1)

const array = ['按时间推荐', '按热度推荐', '随机推荐']

const scrollList= [
	{name: '推荐'},
	{name: '前端'},
	{name: '后台'},
	{name: 'UI设计'},
	{name: '面试面经'},
	{name: '技术前沿'},
	{name: '热点资讯'},
	{name: '其他'}
]

const news = [
	{
					userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
					userName: '可我会像',
					date: '2021年12月20日',
					color: 'cyan',
					label: ['模型'],
					title: '一个拥有大量3D模型的网站',
					desc: '3D模型了解一下？',
					mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
					viewUser: {
						latestUserAvatar: [{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
							},
						],
						viewUserCount: 987
					},
					collectionCount: 567,
					commentCount: 69,
					likeCount: 65
				},
				{
					userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
					userName: '可我会像',
					date: '2021年12月20日',
					color: 'blue',
					label: ['UI设计'],
					title: '为什么资讯不显示时间？',
					desc: '你确定你经常更新文章吗？',
					mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
					viewUser: {
						latestUserAvatar: [{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
							},
							{
								src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
							},
						],
						viewUserCount: 321
					},
					collectionCount: 654,
					commentCount: 232,
					likeCount: 543
				}
			]
</script>

<template>
	<view class="viewport">
		<!-- 顶部自定义导航 -->
		<view class="tabs-fixed tn-bg-white">
			<view class="tn-custom-nav-bar-class tn-custom-nav-bar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				  <view class="custom-nav__back" @click="tn('/pageA/about/about')">
				    <view class="logo-pic png-sussuspension1" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1679989824360-assets/web-upload/d6f05bc7-7e47-4566-98fc-494350f4f5d2.png')">
				      <view class="logo-image ">
				      </view>
				    </view>
				  </view>
					<view class="tn-margin-top tn-margin-left" style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
					  <uv-text type="info" text="援军令"></uv-text>
					</view>
				</view>
			</view>
		  <view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm">
		    <view class="justify-content-item" style="width: 87vw;overflow: hidden;">
					<uv-tabs :list="scrollList" @click="click"></uv-tabs>
				</view>
		    <view class="justify-content-item" style="width: 13vw;overflow: hidden;" @click="tn('/homePages/xxxxx')">
		      <picker @change="bindPickerChange" :value="index" :range="array">
		        <view class="tn-color-black tn-round" style="font-size: 45rpx;margin-top: -5rpx;margin-left: 15rpx;">
		          <text class="tn-icon-level tn-padding-xs" ></text>
		        </view>
		      </picker>
		    </view>
		  </view>
		</view>
		<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
		<view class="tn-margin-bottom-lg">
		  <block v-for="(item, index) in news" :key="index">
		    <view class="article-shadow tn-margin-sm" @click="tn('/pageA/news/news')">
		      <view class="tn-flex">
		        
		        <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
		          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
		            <text class="">{{ item.title }}</text>
		          </view>
		          <view class="tn-padding-top-xs" style="min-height: 90rpx;">
		            <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
		              {{ item.desc }}
		            </text>
		          </view>
		          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
		            <view v-for="(label_item,label_index) in item.label" :key="label_index"
		              class="justify-content-item tn-tag-content__item tn-margin-right tn-text-sm tn-text-bold">
		              <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
		            </view>
		            <view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 5rpx;">
		              <text class="tn-icon-fire tn-text-lg" style="padding-right: 5rpx;"></text>
		              <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
		              <text class="tn-icon-like-lack tn-text-lg" style="padding-right: 5rpx;"></text>
		              <text class="tn-text-df">{{ item.likeCount }}</text>
		            </view>
		          </view>
		        </view>
		        <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
		          <view class="image-article">
		          </view>
		        </view>
		      </view>
		    </view>
		  </block>
		</view>
	</view>
</template>

<style lang="scss">
.viewport {
	width: 100%;
	height: 100%;
	position: relative;
	// background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;
	
	&__back {
		margin: auto 5rpx;
		font-size: 40rpx;
		margin-right: 10rpx;
		margin-left: 30rpx;
		flex-basis: 5%;
	}
	
	&__search {
		flex-basis: 60%;
		width: 100%;
		height: 100%;
		
		&__box {
			width: 100%;
			height: 70%;
			padding: 10rpx 0;
			margin: 0 30rpx;
			border-radius: 60rpx 60rpx 0 60rpx;
			font-size: 24rpx;
		}
		
		&__icon {
			padding-right: 10rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
		}
		
		&__text {
			// color: #AAAAAA;
		}
	}
}
.logo-image{
	z-index: 9999 !important;
	width: 65rpx;
	height: 65rpx;
	position: relative;
}
.logo-pic{
	z-index: 9999 !important;
	background-size: cover;
	background-repeat:no-repeat;
	// background-attachment:fixed;
	background-position:top;
	border-radius: 50%;
}
/* 自定义导航栏内容 end */

/* 旋转 */
.png-sussuspension1{
	animation: suspension1 12s ease-in-out infinite;
}
@keyframes suspension1 {
	0%{
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.tabs-fixed{
	position: fixed;
	top: 0;
	width: 100%;
	transition: all 0.25s ease-out;
	z-index: 1;
}

/* 资讯主图 start*/
.image-article {
	border-radius: 8rpx;
	width: 200rpx;
	height: 200rpx;
	position: relative;
}

.image-pic{
	border: 1rpx solid #F8F7F8;
	background-size: cover;
	background-repeat:no-repeat;
	// background-attachment:fixed;
	background-position:top;
	border-radius: 10rpx;
}

.article-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 文字截取*/
.clamp-text-1 {
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.clamp-text-2 {
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* 标签内容 start*/
.tn-tag-content {
	&__item {
		display: inline-block;
		line-height: 35rpx;
		color: #1D2541;
		background-color: #F3F2F7;
		border-radius: 10rpx;
		font-size: 22rpx;
		padding: 5rpx 15rpx;

		&--prefix {
			padding-right: 10rpx;
		}
	}
}

.tn-custom-nav-bar {
	display: block;
	position: relative;
	
	&__bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
		min-height: 0px;
		/* #ifdef MP-WEIXIN */
		padding-right: 220rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		padding-right: 150rpx;
		/* #endif */
		box-shadow: 0rpx 0rpx 0rpx;
		z-index: 9999;
		
		&--fixed {
			position: fixed;
			width: 100%;
			top: 0;
		}
		
		&--alpha {
			background: transparent !important;
			box-shadow: none !important;
		}
		
		&--bottom-shadow {
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		}
		
		&__action {
			display: flex;
			align-items: center;
			height: 100%;
			justify-content: center;
			max-width: 100%;
			
			&--nav-back {
				/* position: absolute; */
				/* top: 50%; */
				/* left: 20rpx; */
				/* margin-top: -15rpx; */
				// width: 25rpx;
				// height: 25rpx;
				margin-left: 20rpx;
				font-size: 38rpx;
				line-height: 100%;
				// border-width: 0 0 4rpx 4rpx;
				// border-color: #000000;
				// border-style: solid;
				// transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
			}
			
			&--nav-back-text {
				margin-left: 10rpx;
			}
		}
		
		&__content {
			position: absolute;
			text-align: center;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			font-size: 32rpx;
			cursor: none;
			// pointer-events: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
}
</style>